[#macro employeeListView]
<div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>确认要删除该条数据吗?</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
    </el-dialog>
    <div class="data-content">
        <el-row style="height: 100%;min-height: 500px;" :gutter="20">
            <el-col :span="4" class="goods_content_l">
                <span class="title">{{treeTitle}}
                    <i v-if="treeTitle != '部门管理'" class="el-icon-close" @click="chooseDepartment"></i>
                </span>
                <div class="tree">
                    <el-tree :highlight-current="true" :expand-on-click-node="false" :data="orgOptions"
                        :props="defaultProps" @node-click="chooseDepartment">
                        <span class="custom-tree-node jk" slot-scope="{ node, data }">
                            <span>{{data.name}}</span>
                        </span>
                    </el-tree>
                </div>

            </el-col>
            <el-col :span="20" class="right-content">
                <div class="department">
                    <el-row>
                        <el-col :span="20">
                            {{treeTitle}} {{tableData.total}}人
                        </el-col>
                    </el-row>
                </div>
                <div class="tool-add">
                    <el-button size="mini" @click="addView">新增</el-button>
                </div>

                <el-table v-loading="loading" :data="tableData.list" @cell-click="showView"
                    @sort-change="changeTableSort" style="width: 100%;font-size: 12px;">
                    <el-table-column label="姓名" prop="name" width="100">
                    </el-table-column>
                    <el-table-column label="职位" prop="job" width="100">
                    </el-table-column>
                    <el-table-column label="email" prop="email" width="160">
                    </el-table-column>
                    <el-table-column label="电话" prop="phone" width="100">
                    </el-table-column>
                    <el-table-column label="所在部门" prop="structureName" width="100">
                    </el-table-column>
                    <el-table-column label="数据范围" prop="dataScopeName">
                    </el-table-column>



                    <el-table-column width="180" align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" icon="el-icon-info" @click="show(scope.row)">详情
                            </el-button>
                            <el-button type="text" size="mini" icon="el-icon-edit" @click="editView(scope.row)">编辑
                            </el-button>
                            <el-button type="text" icon="el-icon-delete" class="danger" size="mini"
                                style="cursor: pointer;" @click="deleteData(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="page">
                    <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                        :page-size="tableData.size" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
                        :page-count="tableData.totalPage" :total="tableData.total" @size-change="sizeChange"
                        @current-change="pageChange">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
[/#macro]
[#macro employeeListConfig]
<script type="text/x-template" id="my-employee-list">
	[@employeeListView /]
</script>
<script type="text/javascript">
    var labels = [{
        value: '选项1',
        label: '高管'
    }];
    var areas = [];
    var employeeListConfig = {};
    employeeListConfig.template = "#my-employee-list";
    employeeListConfig.methods = config.basicMethod();


    employeeListConfig.methods.addView = function () {
        this.$router.push({ path: 'add' });
    }
    employeeListConfig.methods.editView = function (row) {
        var self = this;
        var data = {};
        data.id = row.id;
        this.$router.push({ path: 'update', query: data });

    }

    employeeListConfig.methods.changeTableSort = function (column) {
        this.searchObject.sortField = column.prop;
        if ("descending" == column.order) {
            this.searchObject.sortMethod = "desc";
        }
        else if ("ascending" == column.order) {
            this.searchObject.sortMethod = "asc";
        }
        else {
            this.searchObject.sortMethod = "";
        }
        this.getSearchList();
    }
    employeeListConfig.methods.showView = function (row, column, cell, event) {
        if (cell.cellIndex > 0) {
            return;
        }
        var param = {};
        param.id = row.id;
        var self = this;
        this.$router.push({ path: 'view', query: param });

    }
    employeeListConfig.methods.show = function (row) {
        var param = {};
        param.id = row.id;
        var self = this;
        this.$router.push({ path: 'view', query: param });

    }
    employeeListConfig.methods.sizeChange = function (event) {
        this.searchObject.size = event;
        this.getSearchList();
    }
    employeeListConfig.methods.pageChange = function (index) {
        this.searchObject.no = index;
        this.getSearchList();
    }
    employeeListConfig.methods.getSearchList = function () {
        this.loading = true;
        var data = this.searchObject, that = this;
        $.post("${siteurl}tenantRest/employee/search.htm", data, function (result) {
            if (result.code == 0) {
                that.tableData = result;
            }
            setTimeout(function () {
                that.loading = false;
            }, 300)
        });
    }
    employeeListConfig.methods.search = function () {
        this.searchObject.no = 1;
        this.getSearchList();
    }
    employeeListConfig.methods.clearData = function () {
        this.searchObject.name = "";
        this.searchObject.phone = "";
    }
    employeeListConfig.methods.deleteData = function (event) {
        this.selectId = event.id;
        this.dialogVisible = true;
    }

    employeeListConfig.methods.handleClose = function (done) {
        this.dialogVisible = false;
        var self = this;
        if (self.selectId) {
            var params = {};
            params.id = self.selectId;
            this.postData("${siteurl}tenantRest/employee/delete.htm", params, function (res) {
                if (res.code == 0) {
                    self.$message({
                        message: '删除数据成功',
                        type: 'success'
                    });
                    self.getSearchList();
                } else {
                    self.$message.error(res.msg);
                }
            });
        }

    }

    employeeListConfig.computed = {};
    employeeListConfig.computed.orgOptions = function () {
        return this.$store.state.orgOptions;
    };

    employeeListConfig.data = function () {
        return {
            searchObject: {
                no: 1,
                size: 10,
                name: '',
                phone: ''
            },
            dialogVisible: false,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            loading: false,
            tableData: {},
            treeTitle: '部门管理',
            filterText: '',
            labelOptions: labels,
            roleOptions: [],
            areaOptions: areas,
            defaultProps: {
                emitPath: false,
                checkStrictly: true,
                children: 'children',
                label: 'name',
                value: 'id'
            },
        }
    };
    employeeListConfig.methods.showAddView = function () {
        this.$router.push({ path: 'add' });
    };

    employeeListConfig.methods.chooseDepartment = function (data) {
        if (data == undefined) {
            this.getSearchList();
            return;
        }
        if (!data.id) {
            this.treeTitle = '部门管理';
            //this.parentId="";
            //this.$refs.tree.setChecked([]);
            $(".is-focusable").removeClass("is-current");
            this.chooseDepartment();
        } else {
            this.treeTitle = data.name;
        }
        this.parentId = data.id;
        this.searchObject.structure = data.id;
        this.searchObject.no = 1;
        this.loading = true;
        var that = this;
        this.getSearchList();
    }
    employeeListConfig.mounted = function () {

    }
    employeeListConfig.activated = function () {
        this.getSearchList();
    }
    var employeeListView = Vue.component('list-employee-view', employeeListConfig);
</script>
[/#macro]